<template>
	<div class="pageContent">
		<div v-if="title || addNew" class="menberConTitle flex" style="justify-content: space-between;">
			<div v-if="title" class="tableTitle">{{title}}</div>
			<!-- <div> -->
			<el-button v-if="addNew" round size="mini" type="primary" @click="add(addGo)">{{ btnText }}</el-button>
			<slot name="addbtn" />
			<!-- </div> -->
		</div>
		<el-table 
			:header-cell-style="pageData.color" 
			:data="pageData.items" 
			:style="pageData.width?pageData.width:'width:100%'" 
			highlight-current-row
			:show-summary="showSummary"
			:summary-method="summaryMethod"
			:span-method="arraySpanMethod"
			ref="singleTable" 
			:border="border" 
			@row-click="rowClick" 
			@selection-change="handleSelectionChange">
            <template v-for="item in data" >
				<el-table-column
					v-if="item.type == 'index'"
					:key="item.id"
					label="编号"
    				type="index"
    				:width="item.width?item.width:'50'">
    			</el-table-column>

				 <el-table-column
					v-if="item.type == 'check'"
					:key="item.id"
    			    type="selection"
    			    width="55">
    			</el-table-column>

				 <el-table-column v-if="item.type == 'slot'" :key="item.id" :label="item.label" :width="item.width">
			    	<template slot-scope="scope">
                      <slot :name="item.prop" :row="scope" :item="item" />
                    </template>
			    </el-table-column>

			    <el-table-column v-if="item.type == 'select'" :key="item.id" :label="item.label?item.label:'操作'" :width="item.width">
			    	<template slot-scope="scope">
                        <el-select :no-data-text="item.noData"  :style="{width: item.width?item.width:'auto'}" v-model="scope.row[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder" @change="selectChange(item.prop, scope.row[item.prop],scope.$index)">
					    	<el-option v-for="(op_item,op_index) in optionData[item.prop]" :key="op_index" :label="op_item.name" :value="op_item.value" >
							</el-option>
					    </el-select>
                    </template>
			    </el-table-column>

			    <el-table-column v-if="item.type == 'text'" :key="item.id" :prop="item.prop" :label="item.label" :width="item.width"></el-table-column>

                 <el-table-column v-if="item.type == 'img'" :key="item.id" :label="item.label" >
			    	<template slot-scope="scope">
						<img :src="scope.row[item.prop]" alt="" :row="scope" style="width:46px;height:34px;margin:0 auto;">
					</template>
			    </el-table-column>

				<el-table-column v-if="item.type == 'input'" :key="item.id" :prop="item.prop" :label="item.label">
					<template slot-scope="scope">
                        <el-input :disabled="item.disabled" v-model="scope.row[item.prop]" :placeholder="item.placeholder" @change="watchInput(item.prop,scope.$index)"></el-input>
                    </template>
				</el-table-column>

				<el-table-column v-if="item.type == 'select_form'" :key="item.id" :prop="item.prop" :label="item.label" :width="item.labelwidth">
					<template slot-scope="scope">
                        <el-select :no-data-text="item.noData"  :style="{width: item.width?item.width:'auto'}" v-model="scope.row[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder" @change="selectChange(item.prop, scope.row[item.prop],scope.$index)">
					    	<el-option v-for="(op_item,op_index) in optionData[item.prop][scope.$index]" :key="op_index" :label="op_item.name" :value="op_item.value" >
							</el-option>
					    </el-select>
                    </template>
				</el-table-column>

				<el-table-column v-if="item.type == 'year'" :key="item.id" :prop="item.prop" :label="item.label">
					<template slot-scope="scope">
                        <div class="block">
 						  <el-date-picker
 						    v-model="scope.row[item.prop]"
 						    type="year"
							value-format="yyyy"  
							:disabled="item.disabled"
							style="width:auto">
 						  </el-date-picker>
 						</div>
                    </template>
				</el-table-column>

				<el-table-column v-if="item.type == 'color'" :key="item.id" :prop="item.prop" :label="item.label"  :width="item.width">
					<template slot-scope="scope">
                       <el-color-picker v-if="item.type == 'color'" :predefine="$globalData.predefineColors" :disabled="item.isDetail" v-model="scope.row[item.prop]" style="margin-top:5px"></el-color-picker>
                    </template>
				</el-table-column>
            </template>
			
		</el-table>
	</div>
</template>

<script>
	export default {
        props:{
            title:{
                type: String,
            },
			pageData:{
				type:Object,
                required: true,
			},
            data:{
                type:Array,
                default:[]
            },
			addNew:{
				type:Boolean,
                default:true
			},
			addGo:{
				type: String,
			},
			border:{
				type:Boolean
			},
			showSummary:{ //合计
				type:Boolean,
				default: false
			},
			summaryMethod:{ //合计自定义
				type:Function
			},
			arraySpanMethod:{ //合并自定义
				type:Function
			},
			btnText:{
				type:String,
				default: '新增'
			},
			optionData:{ //下拉数据
				type: Object,
                default: () => {
                  return {}
                }
			},
        },
		data() {
			return {
				queryData: {
					companyId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
			}
		},
		mounted() {
		},
		watch:{
		},
		methods: {
			selectChange(prop,id,index){
				let data = {prop:prop,id:id,index:index}
				// console.log(data);
				this.$emit('selectChange',data)
            },
			add(e){
				this.$router.push(e)
			},
			handleSelectionChange(e){//checkbox
				console.log(e);
			},
            mapBtn(row){
				console.log(row);
            },
			watchInput(e,index){
				let data = {prop:e,index:index}
				// console.log(data);
				this.$emit('watchinput',data)
			},
			rowClick(row) {
				// 当鼠标点击某一行时
				// console.log(row)
				// this.$refs.singleTable.setCurrentRow(row);
				// this.$parent.$refs.equipmentDetail.$data.queryData.equipmentRelationId = row.equipmentRelationId
				// this.$parent.$refs.equipmentDetail.getPageData()
				// console.log(this.$parent.$refs.serviceConfig.getPageData())
			},
			getPageData() {
				// 获取装备分类列表
				this.$request.postForm(this.$api.getCompanyEquipmentType, this.queryData).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						if(this.pageData.items.length > 0){
							this.rowClick(this.pageData.items[0])
						}
					}
				})
			},
			paginaClick(val) {
				this.queryData.page = val
				this.getPageData()
			},
			modify(row) {
				this.$confirm('确认删除该类型?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.deleteEquipmentType, {
						companyId: this.queryData.companyId,
						equipmentTypeId: row.equipmentTypeId
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('删除成功')
							if(this.queryData.page > 1){
								this.queryData.page = Math.ceil((this.pageData.totalNum - 1) / $globalData.pageSize)
							}
							this.getPageData()
						}
					})
				})
			},
			toTop(row) {
				this.$request.postForm(this.$api.topEquipmentType, {
					companyId: this.queryData.companyId,
					equipmentTypeId: row.equipmentTypeId
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('操作成功')
						this.getPageData()
					}
				})
			},
		}
	}
</script>

<style scoped="scoped">
    .mapBtn{
        cursor: pointer;
    }
	.menberConTitle {
		width: 100%;
		text-align: left;
		padding: 5px 20px;
		background: #F3F3F3;
		margin-bottom: 10px;
		margin-top: 20px;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.pageContent>>>.isdelete {
		color: #F42929;
	}
</style>
